Release 10.1A: OpenEdge Development:
Progress Dynamics Web Development Guide

Overview of CSS rules

CSS files contain a list of rules that apply formatting to elements in an HTML page. Each rule has a selector and a declaration. The declaration contains property and value pairs. Figure 5–3 shows a simple rule that establishes the font size for all paragraph elements (<P>) in an HTML page.

Figure 5–3: CSS rule example

CSS supports three basic types of selectors. You can see the three basic types in rymain.css:

HTML Element Selector — Defines a style for all elements of a particular type. The selector is usually an HTML tag without the brackets (< >).

For example, the BODY HTML element selector in rymain.css defines the background color and font attributes:

BODY    {background-color:#D6D3CE;font-color:#000000;          font-family:MS Sans Serif;font-size:8pt;margin:0;}

Class Selector — Defines a style set in a CLASS attribute. It is always preceded by a period (.). Class selectors are called by setting the CLASS attribute in an element tag. They can assign styles to any of the elements in an HTML page (unlike the HTML Element Selector, which assigns styles to one particular element type).

For example, rymain.css defines the following .hide selector, which renders elements invisible on the HTML page:

.hide      {display:none;}

The .hide selector appears in iframe, div, and form elements, as shown in the following fragment from default.htm:

.                                 . <iframe name="win0" border=0 frameborder="no" class="hide" application="yes" onload="if(window.fLoad) fLoad()"></iframe>                                 .                                 .                                 . <div id="info" class="hide" style="height:100px;width:99%;"></div>                                 .                                 .                                 . <form name="form" method="post" target="run" action="" class="hide">                                 .                                 .

ID Selector — Defines a style set in an ID attribute. It is always preceded by a pound sign (#). Unlike an HTML element or a class selector, an ID selector should be used only once on an HTML page. Also, the style defined in an ID selector overrides any other style setting.

In Progress Dynamics, ID selectors usually apply styles to UI objects that are grouped under span or div elements.

For example, rymain.css defines the following #toobar selector, which defines the style of a toolbar object:

#toolbar    {margin:0px;border-bottom:thin groove;              border-top:thin groove;width:99%;height:28px;}

In default.htm, the formatting is applied in the following div element:

<div id="toolbar" imgdir="../img"></div>

In addition to rules using basic selector types, rymain.css also contains rules that use selectors that match elements based on parent-child relationships. The selector in this type of rule is called a Contextual Selector.

For example, the selector in the following rule in rymain.css matches TD (table cell) elements that are descendants of an element whose ID attribute is toolbar:

#toolbar TD   {margin:0;padding:1px 3px 1px 3px;border:1px #D6D3CE solid}

The selector in the following rule, also in rymain.css, shows the use of the greater-than symbol (>) to limit matching to direct descendants:

#menubar > TABLE   {margin:0pt;padding:0pt;background:#D6D3CE;}

It is beyond the scope of this manual to go into more detail on CSS rules. If you implement style changes in your Progress Dynamics Web applications, you must be more familiar with the CSS specification. In particular, you must understand how CSS establishes precedence when a number of rules apply to the same element.

Again, if you need more information about CSS, a good source is the World Wide Web Consortium site at http://www.w3.org/Style/CSS/learning. It contains lists of books, online sources, and user groups.